<template>
  <!-- 轮播图组件 -->
  <div class="mod-banner">
    <el-carousel
      trigger="click"
      :autoplay="true"
      :interval="4000"
      type="card"
      height="300px"
    >
      <el-carousel-item v-for="(item, i) in banners" :key="i">
        <a href="javascript:;">
          <img style="height: 300px" :src="item.imageUrl" alt="" />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [],
    };
  },
  mounted() {
    this.getBanners();
  },
  methods: {
    getBanners() {
      this.axios({
        url: "/banner" /* 获取轮播图 */,
        method: "get",
      })
        .then((res) => {
          this.banners = res.data.banners;
          // console.log(this.banners);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-banner {
  margin-top: 10px;
}
</style>
